<template>
  <div class="training-chart">
    <h3>训练进度</h3>
    <div class="chart-container">
      <canvas ref="chartCanvas"></canvas>
    </div>
    <div class="metrics">
      <div class="metric">
        <span class="label">损失值:</span>
        <span class="value">{{ loss.toFixed(4) }}</span>
      </div>
      <div class="metric">
        <span class="label">准确率:</span>
        <span class="value">{{ accuracy.toFixed(2) }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  loss: {
    type: Number,
    default: 0
  },
  accuracy: {
    type: Number,
    default: 0
  }
})

const chartCanvas = ref(null)

onMounted(() => {
  const canvas = chartCanvas.value
  const ctx = canvas.getContext('2d')
  
  // 设置画布尺寸
  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  
  // 绘制简单的图表
  drawChart(ctx)
})

function drawChart(ctx) {
  // 清空画布
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  
  // 绘制坐标轴
  ctx.strokeStyle = '#ccc'
  ctx.lineWidth = 1
  ctx.beginPath()
  ctx.moveTo(50, 30)
  ctx.lineTo(50, ctx.canvas.height - 30)
  ctx.lineTo(ctx.canvas.width - 30, ctx.canvas.height - 30)
  ctx.stroke()
  
  // 绘制示例数据点
  ctx.strokeStyle = '#1677ff'
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.moveTo(50, ctx.canvas.height - 30 - (props.loss * 100))
  ctx.lineTo(100, ctx.canvas.height - 30 - (props.accuracy * 2))
  ctx.stroke()
}
</script>

<style scoped>
.training-chart {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
}

.chart-container {
  margin: 20px 0;
  height: 200px;
}

canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
}

.metrics {
  display: flex;
  gap: 20px;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  font-size: 12px;
  color: #666;
}

.value {
  font-size: 18px;
  font-weight: bold;
  color: #1677ff;
}
</style>
